<template>
  <div>
    <!-- 当点击该按钮 发送ajax请求 当数据请求成功后 将flag进行更改 -->
    <button @click="getStuInfo">获取学生信息</button>
    <ul v-if="flag">
      <li>{{ hanhan }}</li>
    </ul>
    <ul v-else>
      <li v-for="(item, index) in info_arr" :key="index">
        {{ item.stu_id }}---{{ item.stu_name }}
      </li>
    </ul>
  </div>
</template>

<script>
/* 
需求获取http://localhost:8001/search_info  get  获取的是学生信息

当页面默认展示的数据发送ajax请求时，可以在created或mounted中进行
有点击按钮的需要

需求：当点击获取学生信息按钮，再展示学生信息，如果不点击默认显示 汪涵很帅

*/
export default {
  data() {
    return {
      hanhan: "汪涵很帅！！",
      flag: true,
      info_arr: [],
    };
  },
  created() {
    /*  this.$http
      .get("http://localhost:8001/search_info")
      .then((res) => {
        console.log(res.data);
        this.info_arr = res.data;
      })
      .catch((err) => {
        console.log(err);
      }); */
    this.getStuInfo();
  },
  mounted() {
    console.log(this.$http);
  },
  methods: {
    getStuInfo() {
      this.$http
        .get("http://localhost:8001/search_info")
        .then((res) => {
          console.log(res.data);
          this.info_arr = res.data;
          // 更改flag的值
          this.flag = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
/* 
vue当中发送ajax请求
vue-resource  (不常用)
axios 主流



*/
</script>

<style lang="scss" scoped>
</style>